<template>
    <transition name="fade">
        <div class="confirm-box" v-show="isShow">
            <div class="alert-mask" v-if="isMaskLayer" @click="maskCancel"></div>
            <transition enter-active-class="zoomIn" leave-active-class="zoomOut">
                <div class="confirm-content" v-show="isShow">
                    <div class="confirm-title">{{ title }}</div>
                    <div class="confirm-text">
                        <slot>{{ content }}</slot>
                    </div>
                    <div :class="[ isShowCancelBtn ? 'btn-box' : 'btn-box btn-only' ]">
                        <span v-if="isShowCancelBtn" class="confirm-btn confirm-btn-cancel" @click="myCancel">{{ cancelVal }}</span>
                        <span class="confirm-btn" @click="confirm">{{ confirmVal }}</span>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
    export default {
        name: 'my-confirm',
        data() {
            return {
                isShow: false,
                resolve: '',
                reject: '',
                promise: ''
            }
        },
        props: {
            // 弹窗内容
            content: {
                type: String,
                default: '这是弹框内容'
            },
            // 是否显示遮罩层
            isMaskLayer: {
                type: Boolean,
                default: true
            },
            // 是否显示取消按钮
            isShowCancelBtn: {
                type: Boolean,
                default: false
            },
            // 标题内容
            title: {
                type: String,
                default: '提示',
            },
            // 确定按钮文字
            confirmVal: {
                type: String,
                default: '确定'
            },
            // 取消按钮文字
            cancelVal: {
                type: String,
                default: '取消'
            },
            // 是否点击遮罩层隐弹窗
            maskHide: {
                type: Boolean,
                default: true
            },
            // 点击确定的回调
            success: {
                type: Function,
                default: function () {
                }
            },
            // 点击取消的回调
            cancel: {
                type: Function,
                default: function () {
                }
            }
        },
        methods: {
            showConfirm() {
                this.isShow = true
                this.promise = new Promise((resolve, reject) => {
                    this.resolve = resolve
                    this.reject = reject
                });
                return this.promise
            },
            maskCancel() {
                if (!this.maskHide) return
                this.isShow = false
                this.reject('cancel')
                this.remove()
            },
            confirm() {
                this.isShow = false
                if (typeof this.success === 'function') {
                    this.resolve('confirm')
                    this.success()
                }
                this.remove()
            },
            myCancel() {
                this.isShow = false
                if (typeof this.cancel === 'function') {
                    this.reject('cancel')
                    this.cancel()
                }
                this.remove()
            },
            remove() {
                setTimeout(() => {
                    this.$destroy()
                }, 500)
            }
        },
        beforeDestroy() {
            document.body.removeChild(this.$el)
        }
    }
</script>

<style lang="less" scoped>
    .alert-mask {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .confirm-box {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        animation-duration: 500ms;
    }

    .confirm-content {
        width: 80%;
        display: table;
        z-index: 5000;
        animation-duration: 500ms;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
        background: #eee;
        padding: .3rem .4rem;
        box-sizing: border-box;
        box-shadow: 0 0 4px 2px rgba(50, 50, 50, .3);
    }

    .confirm-title {
        font-size: .4rem;
    }

    .confirm-text {
        margin: .4rem 0;
        text-align: center;
        font-size: .38rem;
        color: #888;
        slot, p {
            display: inline-block;
            text-align: left;
        }
    }

    .btn-box {
        position: relative;
        font-size: .33rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 .2rem;
        margin-bottom: -.05rem;
        padding-top: .15rem;
    }

    .confirm-btn {
        display: block;
        text-decoration: none;
        position: relative;
        background-color: lime;
        border-radius: .4rem;
        padding: .18rem .7rem;
        &-cancel {
            background-color: crimson;
        }
    }

    .btn-only {
        text-align: center;
        justify-content: space-between;
    }

    .btn-only .confirm-btn {
        width: 70%;
    }
</style>
